// pages/demo07/alpha/alpha.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  //绘制基本图形
  drawBox: function () {
    let ctx = this.ctx
    ctx.fillStyle='green'
    ctx.clearRect(75, 75, 150, 150);
    ctx.fillRect(75, 75, 150, 150)

  },
  //不透明
  setAlpha01: function () {
    let ctx = this.ctx
    ctx.globalAlpha =1
    this.drawBox()
  },
  //半透明
  setAlpha02: function () {
    let ctx = this.ctx
    ctx.globalAlpha =0.5
    this.drawBox()
  },
  //全透明
  setAlpha03: function () {
    let ctx = this.ctx
    ctx.globalAlpha  = 0
    this.drawBox()
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
//创建画布上下文
let that = this
const query = wx.createSelectorQuery()
query.select("#myCanvas")
  .fields({
    node: true
  })
  .exec((res) => {
    const canvas = res[0].node
    that.ctx = canvas.getContext('2d')

    //tip: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300x150)
    canvas.width = 300;
    canvas.height = 300;
    that.drawBox() 

  })


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})